<template>
    <view class="activity-manage">
        <uv-navbar title="我的NFC活动" autoBack />
        
        <!-- 快速创建入口 -->
        <view class="quick-create">
            <uv-button type="primary" size="large" @click="createActivity"
                       customStyle="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;">
                + 创建新活动
            </uv-button>
        </view>
        
        <!-- 活动列表 -->
        <z-paging ref="paging" v-model="activityList" @query="queryList">
            <view class="activity-item" v-for="item in activityList" :key="item.id">
                <view class="activity-card">
                    <view class="activity-header">
                        <uv-text :text="item.name" size="32rpx" bold color="#333" />
                        <view class="status-badge" :class="item.status === 1 ? 'active' : 'inactive'">
                            {{ item.status === 1 ? '进行中' : '已暂停' }}
                        </view>
                    </view>
                    
                    <view class="activity-info">
                        <uv-text :text="'商户：' + item.merchant_name" size="26rpx" color="#666" />
                        <uv-text :text="'创建时间：' + item.create_time" size="26rpx" color="#666" />
                    </view>
                    
                    <view class="activity-actions">
                        <uv-button size="small" @click="copyLink(item)">复制链接</uv-button>
                        <uv-button size="small" type="primary" @click="viewStats(item)">查看数据</uv-button>
                        <uv-button size="small" @click="previewActivity(item)">预览</uv-button>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script setup>
import { ref } from 'vue'

const activityList = ref([])

const queryList = async (pageNo, pageSize) => {
    // 模拟数据，实际应该调用API
    const mockData = [
        {
            id: 1,
            name: '新店开业活动',
            merchant_name: '测试商户',
            status: 1,
            create_time: '2024-01-15 10:30:00',
            nfc_link: 'http://consul.local/nfc-activity.html?merchant_id=5&campaign_id=1'
        }
    ]
    
    return {
        list: mockData,
        total: mockData.length
    }
}

const createActivity = () => {
    uni.showModal({
        title: '创建活动',
        content: '请前往后台管理系统创建NFC活动，或联系管理员协助创建',
        showCancel: false
    })
}

const copyLink = (item) => {
    uni.setClipboardData({
        data: item.nfc_link,
        success: () => {
            uni.showToast({
                title: '链接已复制',
                icon: 'success'
            })
        }
    })
}

const viewStats = (item) => {
    uni.navigateTo({
        url: `/pages-nfc/activity-stats?id=${item.id}`
    })
}

const previewActivity = (item) => {
    // #ifdef H5
    window.open(item.nfc_link, '_blank')
    // #endif
    
    // #ifndef H5
    uni.showModal({
        title: '预览链接',
        content: item.nfc_link,
        showCancel: true,
        cancelText: '复制',
        confirmText: '确定',
        success: (res) => {
            if (res.cancel) {
                copyLink(item)
            }
        }
    })
    // #endif
}
</script>

<style lang="scss" scoped>
.activity-manage {
    background: #f5f5f5;
    min-height: 100vh;
}

.quick-create {
    padding: 40rpx;
}

.activity-item {
    margin: 20rpx;
    
    .activity-card {
        background: #fff;
        border-radius: 20rpx;
        padding: 40rpx;
        box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
        
        .activity-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
            
            .status-badge {
                padding: 10rpx 20rpx;
                border-radius: 20rpx;
                font-size: 24rpx;
                
                &.active {
                    background: #e8f5e8;
                    color: #52c41a;
                }
                
                &.inactive {
                    background: #fff2e8;
                    color: #fa8c16;
                }
            }
        }
        
        .activity-info {
            display: flex;
            flex-direction: column;
            gap: 10rpx;
            margin-bottom: 30rpx;
        }
        
        .activity-actions {
            display: flex;
            gap: 20rpx;
        }
    }
}
</style>